<template>
    <view>
        <u-navbar
            title="模态框"
            @leftClick="navigateBack"
            safeAreaInsetTop
            fixed
            placeholder
        ></u-navbar>
        <u-gap height="20" bgColor="#fff"></u-gap>
        <u-cell-group>
            <u-cell
                @click="showModal(index)"
                :title="item.title"
                :titleStyle="item.titleStyle"
                v-for="(item, index) in list"
                :key="index"
                isLink
            >
                <template #icon>
                    <image
                        class="u-cell-icon"
                        :src="item.iconUrl"
                        mode="widthFix"
                    ></image>
                </template>
            </u-cell>
            <u-cell title="使用js打开" @click="openModal"></u-cell>
        </u-cell-group>
        <u-modal
            :content="content"
            title="标题11"
            :show="show1"
            @confirm="() => (show1 = false)"
        ></u-modal>
        <u-modal
            :content="content"
            :show="show2"
            @confirm="() => (show2 = false)"
        ></u-modal>
        <u-modal
            :content="content"
            :show="show3"
            showCancelButton
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="cancel"
            @close="close"
        ></u-modal>
        <u-modal
            :content="content"
            :show="show4"
            showCancelButton
            asyncClose
            @confirm="confirm4"
            @cancel="() => (show4 = false)"
        ></u-modal>
        <u-modal
            :content="content"
            :show="show5"
            showCancelButton
            buttonReverse
            @confirm="() => (show5 = false)"
            @cancel="() => (show5 = false)"
        ></u-modal>
        <u-modal
            :content="content"
            title="标题"
            :show="show6"
            closeOnClickOverlay
            @confirm="() => (show6 = false)"
            @close="() => (show6 = false)"
        ></u-modal>
        <u-modal
            :content="content"
            round="15"
            title="标题"
            showCancelButton
            button-model="button"
            :show="show7"
            @cancel="() => (show7 = false)"
            @close="() => (show7 = false)"
            @confirm="() => (show7 = false)"
        ></u-modal>
        <u-modal
            title="利剑出鞘,一统江湖"
            :show="show8"
            closeOnClickOverlay
            @confirm="() => (show8 = false)"
        >
            <image
                style="width: 80px; height: 80px"
                src="/static/uview/common/logo.png"
            ></image>
        </u-modal>
        <u-modal
            title="标题"
            :show="show9"
            :content="content"
            closeOnClickOverlay
            showCancelButton
        >
            <u-button
                slot="confirmButton"
                text="确定"
                type="success"
                shape="circle"
                @click="show9 = false"
            ></u-button>
        </u-modal>
        <u-modal
            :content="content"
            title="标题"
            :show="show10"
            :zoom="false"
            @confirm="() => (show10 = false)"
        ></u-modal>

        <u-modal ref="uModal" @confirm="handleConfirm"></u-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                content:
                    '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
                show1: false,
                show2: false,
                show3: false,
                show4: false,
                show5: false,
                show6: false,
                show7: false,
                show8: false,
                show9: false,
                show10: false,
                list: [
                    {
                        title: '基础使用',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/4.png',
                        titleStyle: {},
                    },
                    {
                        title: '无标题',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/5.png',
                        titleStyle: {},
                    },
                    {
                        title: '带取消按钮',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/2.png',
                        titleStyle: {},
                    },
                    {
                        title: '异步关闭',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/6.png',
                        titleStyle: {},
                    },
                    {
                        title: '对调取消和确认按钮',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/3.png',
                        titleStyle: {},
                    },
                    {
                        title: '允许点击遮罩关闭',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/7.png',
                        titleStyle: {},
                    },
                    {
                        title: '按钮样式',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/8.png',
                        titleStyle: {
                        },
                    },
                    {
                        title: '传入slot',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/1.png',
                        titleStyle: {},
                    },
                    {
                        title: '自定义按钮',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/8.png',
                        titleStyle: {},
                    },
                    {
                        title: '淡入淡出动画',
                        iconUrl:
                            'https://cdn.uviewui.com/uview/demo/modal/9.png',
                        titleStyle: {},
                    },
                ],
            };
        },
        methods: {
            openModal() {
               this.$refs.uModal.open({
                    title: '标题',
                    content: '内容',
                    success: (res) => {
                        console.log(res);
                    },
               });
            },
            handleConfirm() {
                this.$refs.uModal.close();
            },
            
            showModal(index) {
                this[`show${index + 1}`] = true;
            },
            navigateBack() {
                uni.navigateBack();
            },
            confirm4() {
                setTimeout(() => {
                    this.show4 = false;
                }, 2000);
            },
            confirm() {
                this.show3 = false;
                console.log('confirm');
            },
            cancel() {
                this.show3 = false;
                console.log('cancel');
            },
            close() {
                this.show3 = false;
                console.log('close');
            },
        },
    };
</script>

<style lang="scss">
    .u-page {
        padding: 0;
    }
</style>
